<template>
    <Teleport to="#after-navigation" v-if="targetExists">
        <GradeManager />
    </Teleport>

    <div>
        <h2 v-if="courseId">{{ $t('grade.report.overview.index.tit_1') }} - {{ userStore.userinfoL?.last_name }} {{ userStore.userinfoL?.first_name }}</h2>
        <h2 v-else>{{ $t('grade.report.overview.index.tit_2') }}</h2>

        <div class="grade-navigation" v-if="courseId">
            <MoodleTabs :list="tabsList" active="1" />
        </div>

        <el-table :data="courseList" stripe v-loading="loading">
            <el-table-column prop="courseName" :label="$t('grade.report.overview.index.table_label_1')">
                <template #default="{ row }">
                    <router-link :to="{ name: 'gradeUser', params: { courseId: row.id } }">{{ row.name }}</router-link>
                </template>
            </el-table-column>
            <el-table-column prop="score" :label="$t('grade.report.overview.index.table_label_2')" width="280"> <template #default="{ row }"> - </template></el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'

import CourseService from '@/api/course'
import type { CourseItem } from '@/types/course'

import MoodleTabs from '@/components/MoodleTabs.vue'
import GradeManager from '@/components/GradeManager.vue'

const route = useRoute()
const userStore = useUserStore()
const loading = ref(false)
const courseId = computed(() => Number(route.params.courseId))
const targetExists = ref(false)

const tabsList = ref([
    {
        value: '1',
        link: `/console/course/${courseId.value}/grade`,
        text: 'grade.report.overview.index.tabs_1',
    },
    {
        value: '2',
        link: `/console/course/${courseId.value}/grade/user`,
        text: 'grade.report.overview.index.tabs_2',
    },
])

const courseList = ref<CourseItem[]>([])
function getCourseList() {
    loading.value = true
    CourseService.listToPersonal()
        .then(res => {
            courseList.value = res
        })
        .finally(() => {
            loading.value = false
        })
}

onMounted(() => {
    getCourseList()
    targetExists.value = !!document.querySelector('#after-navigation')
})
</script>

<style lang="less" scoped>
h2 {
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

.grade-navigation {
    margin-bottom: 30px;
}
</style>
